<template>
	<view class="">
		<uni-nav-bar fixed="true" :border="false">
			<view class="search-box u-flex align-center">
				<view class="search-input-box u-flex align-center">
					<view class="img-box">
						<image class="image100" src="../../static/indexImages/searchicon.png" mode=""></image>
					</view>
					<view class="flex_alitm">
						<input v-model="keyword" type="text" style="font-size: 14px;" placeholder="搜你想要的商品">
					</view>
					<view class="screen-box d-flex align-center justify-space-between ml-4">
						<view class="search-btn" @click="handAddagent">
							<text>申请提现</text>
						</view>
						<view class="export screen-item d-flex align-center"  @click="handScreen(1)">
							<image class="shai" src="../../static/orderImages/screen.png" mode=""></image>
						</view>
						<view class="export screen-item d-flex align-center" @click="handScreen(2)">
							<image class="shai" src="../../static/orderImages/arrow.png" mode=""></image>
						</view>
					</view> 
				</view>
			</view> 
		</uni-nav-bar>
		<view class="content">
			<view class="card-box mt-2" v-for="(item , index) in  agent" :key="index+'agent'">
				<view class="userinfo d-flex align-center">
					<view class="code-box mr-2"><text>账号</text></view>
					<view class="font-bold font-20"><text>{{item.cash_user}}</text></view>
					<!-- <view class="tag ml-2 tag1  d-flex align-center">
						<image class="icon" src="../../static/agentImages/user-icon.png" mode=""></image>
						<text>{{item.realname==1 ? '未实名' : '已实名'}}</text>
					</view>
					<view class="tag ml-2 tag2 d-flex align-center">
						<image class="icon" src="../../static/agentImages/user-ri-icon.png" mode=""></image>
						<text>{{item.exam==1 ? '未审核' : '已审核'}}</text>
					</view> -->
				</view>
				<view class="d-flex align-center mt-2">
					<view class="mr-2 grey">账期：</view>
					<text class="recipient">{{item.billing}}</text>
				</view>
				<view class="d-flex align-center mt-2">
					<view class="mr-2 grey">申请金额：</view>
					<text class="recipient">{{item.cash_money}}</text>
				</view>
				<view class="d-flex align-center mt-2">
					<view class="mr-2 grey">申请状态：</view>
					<text class="recipient">{{item.status_desc}}</text>
				</view>
				<view class="d-flex align-center mt-2">
					<view class="mr-2 grey">申请时间：</view>
					<text class="recipient">{{item.created_at}}</text>
				</view>
			</view>
			<page-empty  con="暂无提现~" v-if="isEmpty(agent)"></page-empty>
		</view>
		<view class="">
			<uv-popup ref="popup" mode="center"  :close-on-click-overlay="false">
				<view class="" style="width: 650rpx;margin: 10px 10px 10px 10px;">
					<uv-form labelPosition="left" labelWidth="100" :model="form" ref="form">
						<text class="css-text-bold css-text-lg">
							最多申请{{totle_money}}额度
						</text>
						<view>
							<uv-form-item label="申请额度:" prop="cash_money">
								<uv-input v-model="form.cash_money" placeholder="请输入申请提现的金额"
									border="surround" />
							</uv-form-item>
						</view>
						<view style="display: flex;margin-bottom: 10px;margin-right: 1%;">
							<uv-button type="error" text="立即提交" @click="cashSubmit()" style="width: 40%;margin-right: 10%;margin-left: 5%;"></uv-button>
							<uv-button type="error" text="取消" @click="closePop()" style="width: 40%;margin-left: 5%;"></uv-button>
						</view>
						</uv-form>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				city: '北京',
				agent:[],
				agents:[
					{
						username:'Baihii',
						realname:1,//是否实名 1 未 2-已
						exam:1,//是否审核 1 未 2-已
						tel:'1879024524',
						superior:'小刘',//上级
						web:'淘宝',//平台
						addtime:'2024-08-01 15:15',
						allorder:55,
						activation:19,
						monthorder:5,
						monthactive:4
					},
					{
						username:'Baihii',
						realname:1,//是否实名 1 未 2-已
						exam:1,//是否审核 1 未 2-已
						tel:'1879024524',
						superior:'小刘',//上级
						web:'淘宝',//平台
						addtime:'2024-08-01 15:15',
						allorder:55,
						activation:19,
						monthorder:5,
						monthactive:4
					},
					{
						username:'Baihii',
						realname:1,//是否实名 1 未 2-已
						exam:1,//是否审核 1 未 2-已
						tel:'1879024524',
						superior:'小刘',//上级
						web:'淘宝',//平台
						addtime:'2024-08-01 15:15',
						allorder:55,
						activation:19,
						monthorder:5,
						monthactive:4
					},
					{
						username:'Baihii',
						realname:2,//是否实名 1 未 2-已
						exam:2,//是否审核 1 未 2-已
						tel:'1879024524',
						superior:'小张',//上级
						web:'拼多多',//平台
						addtime:'2024-08-01 15:15',
						allorder:55,
						activation:19,
						monthorder:5,
						monthactive:4
					},
				],
				form:{
					cash_money:0
				},
				totle_money:0,
			}
		},
		onLoad() {
			this.init();
		},
		methods:{
			isEmpty(item) {
				return uni.$uv.test.empty(item)
			},
			// 添加代理商
			handAddagent(){
				// this.dumpPage('/pages/cash/out',{},'launch')
				this.$refs.popup.open('center');
				// let test = uni.$my.currHost+'pages/register/register?invitId='+uni.$my.shopId;
				// uni.setClipboardData({
				// 	data: test, //需要字符串
				// 	success: function () {
				// 	  uni.showToast({
				// 		title: '已复制链接',
				// 		icon: 'success',
				// 		duration: 2000
				// 	  });
				// 	}
				//   });
				// uni.showToast({
				// 	title:'已复制链接'
				// })
			},
			closePop(){
				this.$refs.popup.close();
			},
			// 筛选
			handScreen(index){
				uni.showToast({
					title:'筛选'+index
				})
			},
			handTab(item){
				uni.showToast({
					title:item
				})
			},
			init(){
				uni.$uv.http.post('/cash/cash').then(res => {
					console.log(res,999999999);
					this.agent = res.data.data;
					this.totle_money=res.data.money;
					// this.gridList = this.makeServerPicUrl(res.data.grid || '', 'pic')
					// this.swiperList = this.makeServerPicUrl(res.data.swiper || '', 'pic')
					// this.adList = this.makeServerPicUrl(res.data.ad || '', 'pic')
					// this.tabList = res.data.tab || []
					// this.popAd = this.makeServerPicUrl(res.data.pop || '', 'pic')
					// if (!this.isEmpty(this.popAd) && !this.isReInit) {
					// 	this.openPopAd()
					// }
					// if (!this.isEmpty(this.tabList)) {
					// 	this.getTabData()
					// }
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			},
			dumpPage(page, params, type) {
				uni.$my.dumpPage(page, params, type)
			},
			cashSubmit(){
				if(this.totle_money == 0){
					uni.showToast({
						title:'暂无可申请的额度'
					})
					return ;
				}
				if(this.totle_money < this.form.cash_money){
					uni.showToast({
						title:'申请的金额超过上限'
					})
					return ;
				}
				uni.$uv.http.post('/cash/cashSubmit',this.form).then(res => {
					if(res.code == 200){
						uni.showToast({
							title:'您已申请成功'
						})
						this.$refs.popup.close();
					}else{
						uni.showToast({
							title:res.msg
						})
					}
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		background-color: #F2F2F3;
		border-radius: 36rpx;
		height: 72rpx;
		width: 320rpx;
		padding: 0 0 0 12rpx;
		.search-input-box{
			input{
				width: 280rpx;
			}
		}
		.image100 , .img-box{
			width: 50rpx;
			height: 50rpx;
		}
		.screen-box{
			width: 300rpx;
			.screen-item{
				.text{
					color: #1456FE;
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
				.shai{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.tab-box{
			width: 100%;
			height: 100rpx;
			background-color: #fff;
		}
		.search-btn{
			width: 128rpx;
			height: 60rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			background: $uni-color-primary;
			border-radius: 50rpx;
		}
	}
	.content{
		padding: 20rpx;
		padding-bottom: 100rpx;
		.card-box{
			padding: 20rpx;
			width: 100%;
			
			background: #FFFFFF;
			border-radius: 16rpx;
			.code-box{
				color: #fff;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				background-color: $uni-color-primary;
			}
			
			.tag{
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				.icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}
			}
			.tag1{
				background: #DBE5FF;
				color: #1456FE;
			}
			.tag2{
				background: #FFEAE4;
				color: #FF600F;
			}
			.grey{
				color: #5D5D5D;
			}
			.data-box{
				padding: 20rpx;
				width: 100%;
				
				background: #F1F3F7;
				border-radius: 16rpx;
				.tab_itemorder {
					width: 25%;
					text-align: center;
				}
			}
			.tab-item{
				color: #F79E06;
			}
		}
	}
	::v-deep .uni-navbar__header-btns-right{
		display: none;
	}
	::v-deep .uni-navbar__header-btns-left{
		display: none;
	}
	::v-deep .uni-navbar__header-container{
		align-items: center;
	}
</style>